<!DOCTYPE html>
<html>
  <head>
    <title>LIM</title>
	<link rel="stylesheet" href="css/smoothness/jquery-ui-1.8.16.custom.css">
	<link rel="stylesheet" href="css/jquery-layout-default-latest.css">
	<script type="text/javascript" src='jquery.js'></script>
    <script type="text/javascript" src='jquery.ui.js'></script>
    <script type="text/javascript" src='jquery.cookie.js'></script>
    <script type="text/javascript" src='jquery.layout.js'></script>
    <script type="text/javascript" src='jquery.raty.js'></script>
    <script type="text/javascript" src='jquery.getUrlParams.js'></script>
    <script type="text/javascript" src='strophe.js'></script>
	<script type="text/javascript" src="strophe.roster.js"></script>
	<script type="text/javascript" src="strophe.register.js"></script>
	<script type="text/javascript" src="strophe.muc.js"></script>
    <script type="text/javascript" src='settings.js'></script>
    <script type="text/javascript" src='LIM.js'></script>
    <script type="text/javascript" src='ntsGlobal.js'></script>
    <script type="text/javascript" src='iso8601.js'></script>
	<style>

		.no-close .ui-dialog-titlebar-close {display: none }

		.tabs-bottom { position: relative; } 
		.tabs-bottom .ui-tabs-panel { height: 140px; overflow: auto; } 
		.tabs-bottom .ui-tabs-nav { position: absolute !important; left: 0; bottom: 0; right:0; padding: 0 0.2em 0.2em 0; } 
		.tabs-bottom .ui-tabs-nav li { margin-top: -2px !important; margin-bottom: 1px !important; border-top: none; border-bottom-width: 1px; }
		.ui-tabs-selected { margin-top: -3px !important; }
		.tabs-bottom li a {	padding:0.1em 0.5em !important;	font-size:80%;}
		.tabs li a {padding:0.1em 0.5em !important;font-size:80%;}

		#login_tabs { height:100%;width:100%;margin:0;padding:0; } 
		
		#login_w { margin:0;padding:5px;padding-right:15px;padding-bottom:20px }
		
		#meter_slider .ui-slider-handle {width:120% !important;background-image:none;background-color:#FF0000;}
		
		#meter_slider { background: -moz-linear-gradient(bottom, #FF0000 0%,#FFFF00 50%,#00FF00 100%);
						background: -webkit-gradient(linear, left bottom, left top, from(#FF0000), to(#00FF00), color-stop(.5,#FFFF00));
						background: linear-gradient(bottom, #FF0000 0%,#FFFF00 50%,#00FF00 100%);
						}
		
		.verticalText {	-webkit-transform:rotate(270deg);
						-moz-transform:rotate(270deg);
						-o-transform: rotate(270deg);
						writing-mode: tb-rl;filter: flipv fliph;
						white-space:nowrap;
						display:block;
					}
		.lim_titlebar { position:absolute;left:0px;right:0px;top:0px;height:25px;
						background-color:#000000;color:#FFFFFF;
						font-size:20px;font-family:sans-serif;letter-spacing:0.1em;
						text-align:center
					}
		.lim_belowTitlebar {position:absolute;left:0;right:5px;top:27px;bottom:0;}
		
		.lim_background_art {position:absolute;width:100%;height:100%;text-align:center;font-size:11em;color:#F0F0F0}
		
		.pollVote {position:relative;left:0px;right:20px;padding:5px;border: 1px ridge black;}
		
		.question {clear:both;width:100%;border-top: 1px ridge black;}
		.question_time {float:left}
		.question_text {float:left}
		.question_rating {float:right}
		.question_voteCount {float:right}
		
	</style>
	
</head>

	<body style="font-size:100.1%;background-color:#DDDDDD;">
	
	<div id="limbox" class="ui-corner-left" style="position:absolute;left:1em;width:3.2em;top:1em;bottom:1em;background-color:#000000;color:#EEEEEE">
		<div id="limbox" style="position:absolute;top:6px;left:10%;"> <img src="FZI_Logo.png" width="80%"> </div>
		<div style="position:absolute;left:0.1em;bottom:1em;height:1em;width:1em;font-size:2.3em;font-family:sans-serif;letter-spacing:0.2em" class="verticalText">
		Live Interest Meter
		</div>
	</div>
	
	<!-- Login Dialog -->
	<div id="login_w" class="dialog" title="Login">
		<div style="position:relative;width:100%;height:100%">
		<div id="login_tabs" class="tabs-bottom">
			<ul>
				<li><a href="#login_tabs-1">Client</a></li>
				<li><a href="#login_tabs-2">Master</a></li>
			</ul>
			<div id="login_tabs-1">
				<div id="login_client_w">
					<label>Group:<input type="text" id="clientGroup"></label>
					<input type="button" id="join" value="Join">
				</div>
			</div>
			<div id="login_tabs-2">
				<div id="login_master_w">
					<label>Group:<input type="text" id="masterGroup"></label>
					<label>Password:<input type="password" id="masterGroupPwd"></label>
					<input type='button' id='setup' value='Setup'>
				</div>
			</div>
		</div>
		</div>
	</div>
	
	<!-- Log Dialog -->
	<div id="log_dlg" class="dialog" title="Log">
		<div id="log_w" style="overflow:scroll;font-size:0.6em;position:absolute;top:0;left:0px;width:50%;height:33%">
		</div>
		<div id="log_raw_w" style="overflow:scroll;font-size:0.6em;position:absolute;top:0;right:0px;width:50%;height:100%">
		</div>
		<div id="log_fix_w" style="overflow:scroll;font-size:10px;position:absolute;bottom:0;left:0px;width:50%;height:66%">
			<div id="log_fix_meter" style="width:100%;height:30px"></div>
			<div id="log_fix_roster" style="width:100%;height:auto;"></div>
		</div>
	</div>	

	<!-- Poll Vote Dialog -->
	<div id="pollVote_dlg" class="dialog" title="Poll Vote">
	</div>	

	<!-- Meter Setup Dialog -->
	<div id="meterSetup_w" class="dialog" title="Meter Setup" style="margin:0;padding:10px;padding-bottom:10px">
		<div id="meterSetup_tabs" class="tabs-bottom" style="width:100%;height:95%;margin:0;padding:0;");>
			<ul>
				<li><a href="#ms_basic">Basic</a></li>
				<li><a href="#ms_adv">Advanced</a></li>
			</ul>
			<div id="ms_basic">
				<table cellpadding="0" cellspacing="0">
				<tr>
					<td>	<label>Title:</label>	</td>
					<td>	<input type='text' id='setupMeterTitle'>	</td>
				</tr><tr>
					<td>	<label>Caption1:</label>	</td>
					<td>	<input type='text' id='setupMeterCaption1'>	</td>
				</tr><tr>
					<td>	<label>Caption2:</label>	</td>
					<td>	<input type='text' id='setupMeterCaption2'>	</td>
				</tr><tr>
					<td>	</td>
					<td>	<input type='button' id='setupMeterSave' value='Save'>
							<input type='button' id='setupMeterCancel' value='Cancel'></td>
				</tr>
				</table>
			</div>
			<div id="ms_adv">
			</div>
		</div>
	</div>	
	
	<!-- Main Container -->
	<div id="main" style="position:absolute;left:3.6em;right:10px;top:10px;bottom:10px;background-color:#FFFFFF;margin:0;padding:0;overflow:visible;">
	
	<!-- Left side -->
	<div id="main_left" class="ui-layout-center" style="margin:5px;padding:0;overflow:visible;margin:0;padding:0;overflow:visible;">

		<!-- Left Center: Meter -->
		<div id="meter_w" class="ui-layout-center" title="Meter" style="margin:0;padding:10px;padding-bottom:12px;">
			<div id="meter_titlebar" class="lim_titlebar" style="background-color:#0063ff">
				<div id="meter_titlebar_title" class="lim_titlebar" style="right:150px;background-color:#0063ff">Meter</div>
				<input type="button" id="meterSetupOpen" value=".." style="position:absolute;top:1px;right:4px;">
				<select id="meter_timeScale" style="position:absolute;top:3px;right:44px;width:110px" size="1">
					<option>5 min</option> <option>10 min</option> <option>30 min</option> <option>60 min</option> <option>120 min</option> <option>all</option>
				</select>
			</div>
			<div id="meter_graph" class="lim_belowTitlebar">
				<div id="meter_graph_yaxis" style="position:absolute;top:0px;left:0px;width:20px;bottom:11px;background:#FFFFFF">
					<div id="meter_graph_yaxis_bar" style="position:absolute;right:0px;width:1px;height:100%;background:#000000"></div>
					<div id="meter_graph_yaxis_cap1"style="position:absolute;left:0;right:5px;height:12px;font-size:10px;text-align: right;">100</div>
					<div id="meter_graph_yaxis_cap2"style="position:absolute;left:0;right:5px;height:12px;bottom:0;font-size:10px;text-align: right;">0</div>
				</div>
				<div id="meter_graph_xaxis" style="position:absolute;bottom:0px;height:13px;left:20px;right:50px;background:#FFFFFF">
					<div id="meter_graph_xaxis_bar" style="position:absolute;width:100%;height:1px;top:0;background:#000000"></div>
					<div id="meter_graph_xaxis_cap1" style="position:absolute;top:0;bottom:0px;width:50px;left:0;font-size:10px;text-align: left;">5min</div>
					<div id="meter_graph_xaxis_cap2" style="position:absolute;top:0;bottom:0px;width:200px;right:0;font-size:10px;text-align: right;">17:01</div>
				</div>
				<div id="meter_grapharea" style="position:absolute;top:0;left:20px;right:50px;bottom:13px">
					<div id="meter_graph_bg" style="width:100%;height:100%;background: #FF0000;
						background: -moz-linear-gradient(bottom, #FF0000 0%,#FFFF00 50%,#00FF00 100%);
						background: -webkit-gradient(linear, left bottom, left top, from(#FF0000), to(#00FF00), color-stop(.5,#FFFF00));
						background: linear-gradient(bottom, #FF0000 0%,#FFFF00 50%,#00FF00 100%);">
					</div>
					<div id="overlay1" style="position:absolute;top:0;left:0;width:100%;height:100%"></div>
					<div id="overlay2" style="position:absolute;top:0;left:0;width:100%;height:100%"></div>
					<div id="overlay3" style="position:absolute;top:0;left:0;width:100%;height:100%"></div>
					<div id="overlay4" style="position:absolute;top:0;left:0;width:100%;height:100%"></div>
				</div>
				<div id="meter_slider_cont" align="center" style="position:absolute;top:0;right:0;width:45px;bottom:11px">
					<div id="meter_slider" style="height:100%;width:40px;" class="slider"></div>
				</div>
			</div>
			<!--[if IE]>
				<style type="text/css">
					#meter_graph {height:300px !important;}
					#meter_grapharea {height:289px !important;}
					#meter_slider_cont {height:289px !important;}
				</style>
			<![endif]-->
		</div>

		<!-- Left South -->
		<div id="main_left_south" class="ui-layout-south" style="margin:5px;padding:0;overflow:visible;margin:0;padding:0;overflow:visible;">
			<!-- Left South - Center: Chat Area-->
			<div id="chat_w" class="ui-layout-center" title="Chat" style="margin:5px;margin-right:10px;padding:0;overflow:visible;">
				<div id="chat_titlebar" class="lim_titlebar" style="background-color:#013282">Chat</div>
				<div id="chat_content" class="lim_belowTitlebar">
					<div class="lim_background_art">&#9786;</div>
					<div style="position:absolute;width:100%;height:100%;overflow:visible;">
						<div id="chat_messages" style="position:absolute;width:100%;top:0;bottom:30px;left:0;border: 1px ridge silver;
								overflow: auto;">
						</div>
						<div id="chat_inputbar" style="position:absolute;width:100%;height:30px;bottom:0;left:0">
							<div style="position:absolute;left:0;right:5.0em">
								<input type="text" id="chat_nick" maxlength="12" style="width:5em">
							</div>
							<div style="position:absolute;left:5.0em;right:65px">
								<input type="text" id="chat_input" maxlength="1000" style="width:100%">
							</div>
							<input type="button" id="sendChatMessage" value="Send" style="position:absolute;right:0px">
						</div>
					</div>
				</div>
			<!-- / Left South Center : Chat -->
			</div>
			<!-- Left South - East: Topics (Only visible for master) -->
			<div class="ui-layout-east">
				<div id="topics_titlebar" class="lim_titlebar" style="background-color:#013282">Topics</div>
				<div id="topics_w" class="lim_belowTitlebar">
					<div id="topic_bar" style="position:absolute;width:100%;top:0;height:1.3em">
						<label>Enter descriptions below:</label>
						<input type='button' id='topicPrev' value='Prev' style="position:absolute;right:6.2em">
						<input type='button' id='topicResend' value='R' style="position:absolute;right:3.7em">
						<input type='button' id='topicNext' value='Next' style="position:absolute;right:0">
					</div>
					<div id="topic_inputbar" style="position:absolute;width:100%;top:1.4em;bottom:0.8em">
						<textarea id="topic_list" style="width:100%;height:100%"></textarea>
					</div>
				</div>
			</div>
			
		<!-- / Left South -->
		</div>
	<!-- / Left Side -->
	</div>
	
	<!-- Right Side -->
	<div id="main_right" class="ui-layout-east" style="margin:0;padding:0;overflow:visible;">
	
		<!-- Right Top -->
		<div id="main_right_top" class="ui-layout-north" style="margin:0;padding:0;overflow:visible;">

			<!-- Group Setup -->
			<div id="groupSetup_w" class="ui-layout-west" title="Group Setup">
				<div id="groupSetup_titlebar" class="lim_titlebar" style="background-color:#013282">Group Setup</div>
				<div id="groupSetup_content" class="lim_belowTitlebar">
					<input type="checkbox" name="groupSetup_chat" value="Chat" checked>Chat<br>
					<input type="checkbox" name="groupSetup_polls" value="PollSubmission" checked>Poll submission<br>
					<input type="checkbox" name="groupSetup_questions" value="Questions" checked>Questions<br>
					<label>MeterValueLifeTime(s):</label><input type="text" id="groupSetup_meterValueLifeTime" value="120"><br>
					<label>VoteUpdateInterval(s):</label><input type="text" id="groupSetup_voteUpdateInterval" value="1"><br>
					<input type="button" id="saveGroupSetup" value="Save">
				</div>
			</div>
			
			<!-- Questions -->
			<div id="questions_w" class="ui-layout-center" title="Questions">
				<div id="questions_titlebar" class="lim_titlebar" style="background-color:#013282">Questions</div>

				<div id="questions_main" class="lim_belowTitlebar" style="margin-right:10px">
					<div class="lim_background_art">?</div>
					<div id="questions_content" style="position:absolute;width:100%;top:0;bottom:30px!important;margin:5px;padding:5px;overflow:auto;">
					</div>
					<div id="questions_inputbar" style="position:absolute;width:100%;height:30px;bottom:0;margin:0;">
						<div style="position:absolute;left:0px;right:55px">
							<input type="text" id="question_input" maxlength="1000" style="width:100%">
						</div>
						<input type="button" id="sendQuestion" value="Ask" style="position:absolute;right:0;">
					</div>
				</div>
			</div>
		
		<!-- / Right Top -->
		</div>

		<!-- Right Bottom -->
		<div id="main_right_bottom" class="ui-layout-center" style="height:100%;width:100%;margin:0;padding:0;overflow:visible;">
		
			<div class="ui-layout-west">
				<div id="pollSetup_titlebar" class="lim_titlebar" style="background-color:#013282">Poll Setup</div>
				<div id="pollSetup_w" class="lim_belowTitlebar">
					<select id="poll_list" style="width:100%" size="5">
					</select>
					<div id="poll_inputbar" style="width:100%;">
						<label>Title:<input id='poll_title' type='text' maxlength="50" style="width:100%;"></label>
						<label>Question:<input id='poll_question' type='text' maxlength="100" style="width:100%;"></label>
						<label>Options:</label>
						<textarea id="poll_options" rows="10" style="width:100%;"></textarea>
					</div>
					<div id="pollSetup_actions" style="width:100%;">
						<input type='button' class='pollOpen' id='pollOpen' value='Open'>
						<input type='button' class='pollOpen' id='pollOpenPopup' value='Open Popup'>
						<input type='button' id='pollSetupCancel' value='Cancel'>
					</div>
				</div>
			</div>
			
			<div class="ui-layout-center">
				<div id="poll_titlebar" class="lim_titlebar" style="background-color:#013282">
					Polls
					<input type="button" id="pollSetupOpen" value="Create" style="position:absolute;top:1px;right:4px;">
				</div>
				<div id="poll_main" class="lim_belowTitlebar">
					<div class="lim_background_art">!</div>
					<div id="pollVoteResults_w" style="position:absolute;width:100%;height:100%;overflow:auto;">
						
					</div>
				</div>
			</div>			
		<!-- / Right Bottom -->
		</div>
	
	<!-- / Right Side -->	
	</div>
	
	<!-- / Main Container -->
	</div>

	</body>
	
	<script type="text/javascript">
	$(function() {
		log('index html script!');
		
		// Login Dialog
		$('#login_w').dialog({dialogClass: 'no-close',modal: true,autoOpen: false});
		$('#login_tabs').tabs();
		
		// Bottom Tabs
		$( ".tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > *" ).removeClass( "ui-corner-all ui-corner-top" ).addClass( "ui-corner-bottom" );
		
		$("#limbox").addClass("ui-corner-left");

		$(".lim_titlebar").addClass("ui-corner-all");
			
		// Log
		$('#log_dlg').dialog();
		$('#log_dlg').dialog('close');

		$('#pollVote_dlg').dialog({dialogClass: 'no-close',modal: true,autoOpen: false});

		// Meter-Setup
		$('#meterSetup_w').dialog({resizable: false, width:370, height:260, autoOpen: false});
		$('#meterSetup_tabs').tabs();
			
		$('#meter_slider').slider({ orientation: 'vertical' });

		// Enable cookiestorage for dialog position and size, binds to drag and resize events
		//JntsDialogPositionCookieStorage('.dialog',"lim_dlg_geo_",cookieExpireDate);

		// Split Left and Right 
		$("#main").layout( {defaults:{applyDefaultStyles: true},east:{size:'50%'}} );
		$("#main_left").layout( {defaults:{applyDefaultStyles: true},south:{size:'50%'}} );
		$("#main_left_south").layout( {defaults:{applyDefaultStyles: true},east:{size:'300'}} );
		$("#main_right").layout( {defaults:{applyDefaultStyles: true},north:{size:'50%'}} );
		$("#main_right_top").layout( {defaults:{applyDefaultStyles: true},west:{size:'200',maxSize:'200'}} );
		$("#main_right_bottom").layout( {defaults:{applyDefaultStyles: true},west:{size:'50%'}} );
		
		// Hide the poll setup
		$('#main_right_bottom').layout().hide('west');
		// Hide the group setup
		$('#main_right_top').layout().hide('west');
		// Hide the topics input area
		$('#main_left_south').layout().hide('east');

		//$.ajaxSetup ({cache: false});	// Disable caching of AJAX responses
		//$('#entries').load('entries.html');
		var mode = $(document).getUrlParam("mode");
		var group = $(document).getUrlParam("group");
		if ((mode != null) && (group != null))
		{
			if (mode == "master") 
			{
				$('#masterGroup').get(0).value = group;
				$('#login_tabs').tabs({ selected: 1 });
				$('#login_w').dialog('open');
			}   
			if (mode == "client") 
			{
				$('#clientGroup').get(0).value = group;
				startClient();
			}
		} else {
			$('#login_w').dialog('open');
		}
	});
	</script>
	
</html>
